<script lang="ts" setup>
import { ref } from 'vue'
import { ChangePwd, accountModelType } from '@/api/server/v2/login'

const accountModel = ref<accountModelType>({
  OldPassword: '',
  NewPassword: '',
  ConfirmPassword: ''
})
const accountRules = ref({
  OldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  NewPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 8, message: '为了您的账户安全,密码至少8位', trigger: 'blur' }
  ],
  ConfirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 8, message: '为了您的账户安全,密码至少8位', trigger: 'blur' }
  ]
})

const accountForm = ref<any>(null)
const submit = async () => {
  await accountForm.value.validate()
  const Message = await ChangePwd(accountModel.value)
  // console.log(Message)
  uni.navigateBack()
  setTimeout(() => {
    uni.$u.toast(Message)
  }, 200)
}
</script>

<template>
  <view class="total">
    <view style="background-color: #fff; padding-left: 34rpx">
      <u-form :model="accountModel" :rules="accountRules" ref="accountForm">
        <u-form-item
          label="旧密码"
          prop="OldPassword"
          labelWidth="242rpx"
          borderBottom
        >
          <u-input
            v-model="accountModel.OldPassword"
            placeholder="请输入旧密码（必填）"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="新密码"
          prop="NewPassword"
          labelWidth="242rpx"
          borderBottom
        >
          <u-input
            v-model="accountModel.NewPassword"
            placeholder="请输入新密码（必填）"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="确认密码"
          prop="ConfirmPassword"
          labelWidth="242rpx"
        >
          <u-input
            v-model="accountModel.ConfirmPassword"
            placeholder="请输入确认密码（必填）"
          ></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="tip">需大小写字母＋数字＋特殊字符三种及以上组合</view>
    <u-button @click="submit" type="primary">提交</u-button>
    <navigator open-type="navigateBack">
      <u-button>取消</u-button>
    </navigator>
  </view>
</template>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6;
  font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
  padding-top: 24rpx;
}
:deep(.u-button--square) {
  margin-top: 24rpx;
  width: 700rpx !important;
}
:deep(.u-form-item__body__right__message) {
  margin-left: 260rpx !important;
  margin-top: -20rpx;
}
.tip {
  margin-top: 28rpx;
  margin-left: 34rpx;
  color: #ff5f5e;
  font-size: 24rpx;
}
</style>
